/*
 * @Author: dingyuwen ding_yuwen@163.com
 * @Date: 2023-02-13 14:56:49
 * @LastEditTime: 2023-03-16 17:34:38
 * @LastEditors: DingYuwen 43669762+DingYuwen@users.noreply.github.com
 * @Description:
 */
import {
  Flex,
  Table,
  TableContainer,
  Tbody,
  Td,
  Text,
  Th,
  Thead,
  Tr,
} from '@chakra-ui/react';

const recordList = [
  {
    amount: '2000',
    date: '2023.1.4 22:36:44',
    type: '账户充值抵扣',
    account: '7455***',
  },
  {
    amount: '5000',
    date: '2023.1.4 22:36:44',
    type: '账户充值抵扣',
    account: '7455***',
  },
  {
    amount: '4000',
    date: '2023.1.4 22:36:44',
    type: '提现',
    account: '7455***',
  },
  {
    amount: '4000',
    date: '2023.1.4 22:36:44',
    type: '提现',
    account: '7455***',
  },
  {
    amount: '4000',
    date: '2023.1.4 22:36:44',
    type: '提现',
    account: '7455***',
  },
  {
    amount: '4000',
    date: '2023.1.4 22:36:44',
    type: '提现',
    account: '7455***',
  },
  {
    amount: '4000',
    date: '2023.1.4 22:36:44',
    type: '提现',
    account: '7455***',
  },
  {
    amount: '4000',
    date: '2023.1.4 22:36:44',
    type: '提现',
    account: '7455***',
  },
  {
    amount: '4000',
    date: '2023.1.4 22:36:44',
    type: '提现',
    account: '7455***',
  },
  {
    amount: '4000',
    date: '2023.1.4 22:36:44',
    type: '提现',
    account: '7455***',
  },
  {
    amount: '4000',
    date: '2023.1.4 22:36:44',
    type: '提现',
    account: '7455***',
  },
];
export default function ExtractRecords() {
  return (
    <Flex direction="column" gap="4" px="2" pb="4">
      <TableContainer>
        <Table variant="simple" size="sm">
          <Thead>
            <Tr>
              <Th>金额</Th>
              <Th>类型</Th>
              <Th>日期</Th>
            </Tr>
          </Thead>
          <Tbody>
            {recordList.map((r) => (
              <Tr key={r.date}>
                <Td>
                  <Text fontSize="xs"> -{r.amount}</Text>
                </Td>
                <Td>
                  <Text fontSize="xs">{r.type}</Text>
                </Td>
                <Td>
                  <Text fontSize="xs">{r.date}</Text>
                </Td>
              </Tr>
            ))}
          </Tbody>
        </Table>
      </TableContainer>
    </Flex>
  );
}
